import Vue from "vue";
import {VListGroup, VListTile, VListTileAction, VListTileContent, VListTileTitle} from 'vuetify/es5/components/VList'
import VIcon from 'vuetify/es5/components/VIcon'

const normalizePath = path => path.replace(/^\//, '');

const renderLeaf = (h, route, parentPath) => 
  h(VListTile, {props: {to: `${parentPath}/${normalizePath(route.path)}`}}, [
    h(VListTileAction, {}, [
      h(VIcon, {domProps: {innerHTML: route.meta.icon}}, [])
    ]),
    h(VListTileContent, {}, [
      h(VListTileTitle, {}, route.name)
    ])
  ]);

const renderSubTree = (h, route, parentPath) =>
  h(VListGroup, {}, [
    h(VListTile, {slot: 'activator'}, [
      h(VListTileAction, {}, [
        h(VIcon, {domProps: {innerHTML: route.meta.icon}}, [])
      ]),
      h(VListTileContent, {}, [
        h(VListTileTitle, {}, route.name)
      ])
    ]),
    ...route.children.map(child => h(NavItem, {props: {route: child, parentPath: `${parentPath}/${normalizePath(route.path)}`}}, []))
  ]);

const NavItem = Vue.component('NavItem', {
  props: {
    route: {type: Object, required: true},
    parentPath: {type: String, default: ''}
  },

  render(h) {
    if (this.$props.route.children) {
      return renderSubTree(h, this.$props.route, this.parentPath);
    } else {
      return renderLeaf(h, this.$props.route, this.parentPath);
    }
  }
});

export default NavItem;